function drawMap(mapValues, compareValues, mapID) {
	var map = document.getElementById('usageMap' + mapID);
	var context = map.getContext("2d");
	
	var topHeight = 30;
	var leftWidth = 30;
	
	var height = map.height - topHeight;
	var width = map.width - leftWidth;
	
	context.clearRect(0, 0, map.width, map.height);
	
	var dayWidth = width / 7;
	var hourHeight = height / 24;
	
	//For each day, write its name
	context.font = (topHeight - 16) + "px sans-serif";
	context.strokeStyle = "#000";
	context.fillStyle = "#000";
	context.lineWidth = 1;
	context.textBaseline = "bottom";
	context.textAlign = "center";
	days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
	for(var day = 0; day < 7; day++) {
		context.fillText(days[day], leftWidth + dayWidth * day + (dayWidth / 2), topHeight - 5);
	}
	
	//For each hour, write its number
	context.font = (leftWidth - 16) + "px sans-serif";
	context.textAlign = "right";
	context.textBaseline = "middle";
	hours = ["AM", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "PM", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"]
	for(var hour = 0; hour < 24; hour++) {
		context.fillText(hours[hour], leftWidth - 4, topHeight + hourHeight * hour + 1);
	}
	
	//For each hour, draw a box
	for(var day = 0; day < 7; day++) {
		for(var hour = 0; hour < 24; hour++) {
			var hourI = (day * 24) + hour;
			var thisValue = 1.0
			if(mapValues) thisValue = 1.0 - (mapValues[hourI]);
			var compareValue = 1.0;
			if(compareValues) compareValue = 1.0 - (compareValues[hourI]);
			
			//Fill the primary box
			context.fillStyle = "rgb(" + 255 + "," + Math.floor(thisValue*255) + "," + Math.floor(thisValue*255) + ")";
			context.strokeStyle = "#ccc";
			context.lineWidth = 1;
			if(thisValue < 1.0) {
				context.fillRect(leftWidth + dayWidth * day, topHeight + hourHeight * hour, dayWidth, hourHeight);
			}
			
			//Fill the compare box
			context.fillStyle = "rgb(" + Math.floor(compareValue*255) + "," + Math.floor(compareValue*255) + "," + 255 + ")";
			if(thisValue < 1.0 && compareValue < 1.0) {
				context.fillRect(leftWidth + dayWidth * day + (dayWidth / 2), topHeight + hourHeight * hour, (dayWidth / 2), hourHeight);
			}
			else if(compareValue < 1.0) {
				context.fillRect(leftWidth + dayWidth * day, topHeight + hourHeight * hour, dayWidth, hourHeight);
			}
			
			context.strokeRect(leftWidth + dayWidth * day, topHeight + hourHeight * hour, dayWidth, hourHeight);
			
			if(day == 6 && hour == 12) {
				context.strokeStyle = "#aaa";
				context.lineWidth = 2;
				context.moveTo(leftWidth, topHeight + hourHeight * hour);
				context.lineTo(leftWidth + dayWidth * 7, topHeight + hourHeight * hour);
				context.stroke();
			}
		}
	}
}